<template>
  <div id="app" :style="{'background-image': 'linear-gradient(to top, '+lightBg+' 0%, '+darkBg+' 100%)'}">
<!--    <bg-snow></bg-snow>-->
<!--    <bg-index></bg-index>-->
    <bg-normal ></bg-normal>
    <el-image :src="bgImg" lazy :fit="fill" style="position: absolute;width: 100%;height: 100%" v-if="bgImg"></el-image>
    <div class="bg-block">
      <div style="height: 100%;width: 50%;position: relative;display: inline-flex" v-if="bodyImg">
        <el-image :src="bodyImg" lazy fit="scale-down" style="z-index: 50"></el-image>
      </div>
      <div class="loginFormBlock">
        <div class="longinTitle" :style="{ 'color': titleColor }">用户登录</div>
        <div class="loginFormDom">
          <el-form :model="loginForm" ref="loginForm" :rules="loginRules" @keyup.enter.native="handleLogin" style="width: 90%">
            <el-form-item prop="username">
              <div class="loginFormItem" :style="{'border-bottom':userNameBorder==true?'2px solid '+borderBottom:'2px solid #ebebeb'}">
                <div style="width: 40px;height: 100%;display: inline-flex;justify-content: center;align-items: center;">
                  <img src="../../assets/images/user1.svg" style="width: auto;height: 50%;margin: 0 5px" v-show="!userNameBorder"/>
                  <img :src="userIcon" style="width: auto;height: 50%;margin: 0 5px" v-show="userNameBorder"/>
                </div>
                <el-input v-model="loginForm.username" placeholder="请输入用户名" @focus="showBorderLeft('userNameBorder')" @blur="userNameBorder=false" style="width: 320px !important;"/>
                <i class="el-icon-error" @click="clear" style="font-size: 18px"></i>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="loginFormItem" :style="{'border-bottom':passwordBorder==true?'2px solid '+borderBottom:'2px solid #ebebeb'}">
                <div style="width: 40px;height: 100%;display: inline-flex;justify-content: center;align-items: center;">
                  <img src="../../assets/images/mima1.svg" style="width: auto;height: 50%;margin: 0 5px" v-show="!passwordBorder"/>
                  <img :src="mimaIcon" style="width: auto;height: 50%;margin: 0 5px" v-show="passwordBorder"/>
                </div>
                <el-input v-model="loginForm.password" :type="showPassword?'':'password'" placeholder="请输入密码" @focus="showBorderLeft('passwordBorder')" @blur="passwordBorder=false" style="width: 320px !important;"/>
                <svg-icon :icon-class="showPassword==false? 'eye' : 'eye-open'" @click="showPassword=!showPassword" style="color: #ebebeb"/>
              </div>
            </el-form-item>
            <el-form-item prop="verificationCode">
              <div class="loginFormItem" :style="{'border-bottom':codeBorder==true?'2px solid '+borderBottom:'2px solid #ebebeb'}">
                <div style="width: 40px;height: 100%;display: inline-flex;justify-content: center;align-items: center;">
                  <img src="../../assets/images/code.svg" style="width: auto;height: 50%;margin: 0 5px" v-show="!codeBorder"/>
                  <img :src="codeIcon" style="width: auto;height: 50%;margin: 0 5px;" v-show="codeBorder"/>
                </div>

                <el-input v-model="loginForm.verificationCode" placeholder="请输入验证码" @focus="showBorderLeft('codeBorder')" @blur="codeBorder=false" style="width: 240px !important;"/>
                <img :src="url" style="max-width: 100px;max-height: 100%" @click="initData"/>
              </div>
            </el-form-item>
            <el-form-item prop="agree">
              <div class="checkBoxItem">
                <el-checkbox v-model='loginForm.agree' class="checkboxStyle">我已审慎阅读并同意</el-checkbox>
                <span class="agreementItem" v-for="(item,index) in loginAgreementList" :key="index" @click="showAgreementDetail(item)">《{{ item.title }}》</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="loginFormBtn" >
<!--          <div class="login-btn" :style="{ background:btnBg}" >登录</div>-->
          <button class="login-btn" :style="{ background:btnBg}" v-preventReClick @click="handleLogin" >登录</button>
        </div>
      </div>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="showContentDialog"
      width="50%"
      center>
      <div v-html="agreementHtml" style="margin: 0 20px;"></div>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showContentDialog = false">关  闭</el-button>
        </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  bossLogin,
  initializationLogin,
  getLoginAgreement,
  getAgentAgreement,
  getUserLogin,
  changePassWordPersonal
} from '@/api/getData'
import bgSnow from '../loginCom/bg_snow'
import bgIndex from '../loginCom/bg_index'
import bgNormal from '../loginCom/bg_normal'
// import bgImg_cy from '../../assets/login/img-chongyang-bg.png'
// import bgImg_cy_body from '../../assets/login/img-chongyang-body.png'

export default {
  components:{
    bgSnow,
    bgIndex,
    bgNormal,
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordForm.newPassWord) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      encryptedString: '',
      url: '',
      loginForm: {
        username: '',
        password: '',
        verificationCode: '',
        agree: false,
      },
      operation: {
        loginView: false,
        rechargeView: false,
      },
      passwordForm:{
        oldPassWord: '',
        newPassWord: '',
        commitPassWord: ''
      },
      loginRules: {
        username: [{required: true, trigger: 'blur', message: '请输入用户名'}],
        password: [{required: true, trigger: 'blur', validator: validatePass}],
        verificationCode: [{required: true, trigger: 'blur', message: '请输入图片验证码'}]
      },
      loading: false,
      pwdType: 'password',
      redirect: undefined,
      activeName: 'first',
      userNameBorder: false,
      passwordBorder: false,
      codeBorder: false,
      showPassword: false,
      bgColorList: [
        // {
        //   min: 1609776000000, max: 1609862400000, light: '#4D8DEC', dark: '#4b7cc5', border: '#4D8DEC', btn: 'linear-gradient(to top, #4D8DEC 0%, #90B8F3 100%)', title: '#4D8DEC', bgImg: require('../../assets/login/img-xiaohan.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1611072000000, max: 1611158400000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-laba.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1612368000000, max: 1612454400000, light: '#faad14', dark: '#ad6800', border: '#ffc53d', btn: 'linear-gradient(to top, #ad6800 0%, #ffc53d 100%)', title: '#ffc53d', bgImg: require('../../assets/login/img-xiaonian1.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user4.svg'), mimaIcon: require('../../assets/login/icon/mima4.svg'), codeIcon: require('../../assets/login/icon/code4.svg'), fill: 'cover'
        // },
        // {
        //   min: 1612972800000, max: 1613059200000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chuxi.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1613059200000, max: 1613145600000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chuyi.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1613145600000, max: 1613232000000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chuer.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1613232000000, max: 1613318400000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chusan.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1613318400000, max: 1613404800000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chusi.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1613404800000, max: 1613491200000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chuwu.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1613491200000, max: 1613577600000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chuliu.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user6.png'), mimaIcon: require('../../assets/login/icon/mima6.png'), codeIcon: require('../../assets/login/icon/code6.png'), fill: 'cover'
        // },
        // {
        //   min: 1613577600000, max: 1613664000000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chuqi.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user7.png'), mimaIcon: require('../../assets/login/icon/mima7.png'), codeIcon: require('../../assets/login/icon/code7.png'), fill: 'cover'
        // },
        // {
        //   min: 1613664000000, max: 1613750400000, light: '#cf1322', dark: '#a8071a', border: '#f5222d', btn: 'linear-gradient(to top, #a8071a 0%, #cf1322 100%)', title: '#f5222d', bgImg: require('../../assets/login/img-chuba.jpg'), bodyImg: '',
        //   userIcon: require('../../assets/login/icon/user7.png'), mimaIcon: require('../../assets/login/icon/mima7.png'), codeIcon: require('../../assets/login/icon/code7.png'), fill: 'cover'
        // },
      ],
      lightBg: '#9EC8FC',
      darkBg: '#000b61',
      borderBottom: '#005bea',
      btnBg: 'linear-gradient(to top, #005bea 0%, #00c6fb 100%)',
      titleColor: '#87CEFA',
      fill: 'cover',
      bgImg: require('../../assets/login/img-normal-bg.jpg'),
      // bodyImg: require('../../assets/login/img-bg.png'),
      bodyImg: require('../../assets/login/img-bg1.png'),
      userIcon: require('../../assets/login/icon/user2.png'),
      codeIcon: require('../../assets/login/icon/code2.png'),
      mimaIcon: require('../../assets/login/icon/mima2.png'),
      agreementHtml: '',
      showAgreementDialog: false,
      loginAgreementList: [],
      showContentDialog: false,
      title: '',
      themeInTime: false,
      rules: {
        oldPassWord: [
          { required: true, message: '请输入老密码', trigger: 'change' }
        ],
        newPassWord: [
          { required: true, message: '请输入新密码', trigger: 'change' },
          { pattern: /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/, message: '请输入6-20位数字加字母！' }
        ],
        commitPassWord: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
    }
  },

  mounted() {
    let current = new Date().getTime();
    this.bgColorList.map(item => {
      if (current > item.min && current < item.max) {
        this.lightBg = item.light;
        this.darkBg = item.dark;
        this.borderBottom = item.border;
        this.btnBg = item.btn;
        this.titleColor = item.title;
        this.bgImg = item.bgImg;
        this.bodyImg = item.bodyImg;
        this.userIcon = item.userIcon;
        this.codeIcon = item.codeIcon;
        this.mimaIcon = item.mimaIcon;
        this.fill = item.fill;
        this.themeInTime = true;
      }
    })

    this.initData()
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    async initData() {
      const returnData = await initializationLogin({})
      if (returnData._result) {
        this.encryptedString = returnData.data
        this.url = '/api/oceanside-send-and-check/code/send/pictureCode/' + this.encryptedString
      }
      let returnList = await getLoginAgreement({dictType: 'LOGIN'})
      if (returnList._result) {
        if (returnList.data) {
          this.loginAgreementList = returnList.data;
        }
      }
    },
    showAgreementDetail(obj) {
      this.title = obj.title;
      this.agreementHtml = obj.content;
      this.showContentDialog = true;
    },
    handleLogin() {
      this.$refs.loginForm.validate(async valid => {
          if (valid && this.loginForm.agree) {
            this.loading = true;
            const t = await bossLogin({
              loginname: this.loginForm.username,
              password: this.loginForm.password,
              uid: this.encryptedString,
              imgCode: this.loginForm.verificationCode
            })

            if (t._result) {
              localStorage.setItem('router', JSON.stringify(t.data.menuList))
              localStorage.setItem('permission', JSON.stringify(t.data.permissionList))
              localStorage.setItem('image', t.data.setting.IMG_READ_URL)
              localStorage.setItem('roleChar', t.data.roleChar)
              localStorage.setItem('sessionId',t.data.sessionId)
              if (t.data.noticeList && t.data.noticeList.length > 0) {
                localStorage.setItem('noticeList', JSON.stringify(t.data.noticeList))
              } else {
                localStorage.setItem('noticeList', JSON.stringify([]))
              }
              let item = {};//主题
              //当主题不在节日时间点内
              if (!this.themeInTime) {
                //如果数据库查询到主题 直接覆盖缓存中的主题
                if (t.data.theme) {
                  item = JSON.parse(t.data.theme);//数据库内存储的值
                } else {
                  item = JSON.parse(localStorage.getItem('theme'));

                  window.name = 'isFirstVisit';
                }
              } else {
                item = JSON.parse(localStorage.getItem('theme'));
                console.log('themeInTime => item.normalBg='+item.normalBg)
              }
              let normalBg = document.body.style.getPropertyValue('--normalBg').trim();//APP.vue中存储的主题色
              if (item.normalBg != normalBg) {
                window.name = 'login';
                this.$store.dispatch('app/setSidebarBgColor', item.normalBg);
                this.$store.dispatch('app/setTableBgColor', item.lBg);
                localStorage.setItem('theme',JSON.stringify(item));
                // 设置值
                document.body.style.setProperty("--normalBg", item.normalBg);
                document.body.style.setProperty("--lightBg", item.lightBg);
                document.body.style.setProperty("--hoverBg", item.hoverBg);
                document.body.style.setProperty("--lbBg", item.lbBg);
                document.body.style.setProperty("--lBg", item.lBg);
                document.body.style.setProperty("--primary", item.normalBg);
                document.body.style.setProperty("--primaryActive", item.lightBg);
                document.body.style.setProperty("--primaryHover", item.hoverBg);
                document.body.style.setProperty("--primaryHoverBg", item.lbBg);
                document.body.style.setProperty("--success", "#25C547");
                document.body.style.setProperty("--successActive", "#25C540");
                document.body.style.setProperty("--successHover", "#6EDC91");
                document.body.style.setProperty("--successHoverBg", "#E8F9EB");
                document.body.style.setProperty("--warning", "#FCA00C");
                document.body.style.setProperty("--warningActive", "#F19B1A");
                document.body.style.setProperty("--warningHoverBg", "#F9F5EF");
                document.body.style.setProperty("--info", "#CACACA");
                document.body.style.setProperty("--infoActive", "#C0C0C0");
                document.body.style.setProperty("--infoHoverBg", "#F8F8F8");
                document.body.style.setProperty("--danger", "#DD1B1B");
                document.body.style.setProperty("--dangerActive", "#D51B1B");
                document.body.style.setProperty("--dangerHoverBg", "#FCEBEB");
              }

              this.$store.dispatch('user/Login', t.data).then(async () => {
                this.loading = false

                if (t.data.roleChar == 'DAILI_ADMIN') {
                  let res = await getAgentAgreement({})
                  if (res._result) {
                    if (res.data && res.data.length > 0) {
                      this.$store.dispatch('user/NeedToSignAgreement', false).then(() => {
                        this.loading = false;
                        localStorage.setItem('signStatus', false);
                        this.$router.push({path: '/agentSignAgreement'})
                      }).catch(() => {
                        this.loading = false
                      })
                    } else {
                      localStorage.setItem('signStatus', true);
                      this.loading = false
                      this.$router.push({path: '/'})
                    }
                  }
                  //修改默认密码
                 /* let ulogin=await getUserLogin()
                  if(ulogin._result){
                    if(res.data&&res.data.length>0){
                      if(res.data.ifChangeDefaultPassword=='C_NO'){
                        this.showLoginView(true)
                      }
                    }
                  }*/
                } else {
                  localStorage.setItem('signStatus', true);
                  this.loading = false
                  this.$router.push({path: '/'})
                }
              }).catch(() => {
                this.loading = false
              })
            } else {
              this.loading = false
            }
            this.initData()
          }
        }
      )
    },

    toForgetPassword() {
      this.$router.push({path: '/password-retrieval'})
    }
    ,
    clear() {
      this.loginForm.username = '';
      this.loginForm.password = '';
    }
    ,
    showBorderLeft(name) {
      let arr = ['userNameBorder', 'passwordBorder', 'codeBorder'];
      for (let i of arr) {
        if (name == i) {
          this[i] = true;
        } else {
          this[i] = false;
        }
      }
    },
    async showLoginView(boolean) {
      this.operation.loginView = boolean
    },
    async changePassWord() {
      this.$refs['passwordForm'].validate(async (valid) => {
        if (valid) {
          const returnData = await changePassWordPersonal({
            id: this.form.loginId,
            oldPassWord: this.passwordForm.oldPassWord,
            newPassWord: this.passwordForm.newPassWord,
            commitPassWord: this.passwordForm.commitPassWord
          })
          if (returnData._result) {
            this.$message.success("操作成功");
            this.operation.loginView = false
          }
          return true;
        } else {
          console.log('error submit!!');
          return false;
        }

      });
    }
  }
}
</script>
<style scoped>
#app {
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

}

.bg-block {
  width: 1200px;
  height: 600px;
//position: relative;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  z-index: 160;
}

.loginFormBlock {
  width: 500px;
  height: auto;
  position: fixed;
  left: 60%;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-content: space-between;
  flex-direction: column;
//background: rgba(255,255,255,0.7);
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.longinTitle {
  width: 100%;
  height: 100px;
  color: #005bea;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  line-height: 100px;
}

.loginFormDom {
  width: 90%;
  height: auto;
  position: relative;
  left: 0;
  top: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}

.loginFormItem {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ebebeb;
  font-size: 14px;
}

.loginFormBtn {
  width: 100%;
  height: 150px;
  color: #000b61;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  line-height: 150px;
}

.checkboxStyle {
  color: white;
}

.checkBoxItem {
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
  line-height: 30px;
  margin: 10px 0;
  text-align: left;
}

.agreementItem {
  width: auto;
  padding: 0 5px 0 10px;
  color: cornflowerblue;
  cursor: pointer;
}

.agreementItem:hover {
  font-weight: bold;
  color: white;
}

.login-btn {
  width: 80%;
  height: 50px;
  border: none;
  border-radius: 5px;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  letter-spacing: 10px;
  margin: 50px 10%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

>>> .el-input {
  width: 80%;
  background: rgba(255,255,255,0);
}

>>> .el-input--medium .el-input__inner {
  height: 46px;
  line-height: 46px;
  border: none;
  background: rgba(255,255,255,0);
}

>>> .el-form-item__error {
  left: 55px;
}
>>> .el-input--medium .el-input__inner {
  height: 46px;
  line-height: 46px;
  background: none;
  border: none;
  color: #fff !important;
  font-size: 20px;
  background: rgba(255,255,255,0);
}

>>>input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  background-color: transparent;
  transition: background-color 50000s ease-in-out 0s;
}
</style>
